<template>
  <ul class="wrapper">
    <li 
      v-for="book in books" 
      class="book flex-row" 
      :key="book._id"
      @click="navigateTo(book._id)"
    >
      <div class="left" @click.stop="previewImg(book.image)">
        <img :src="book.image" class="image" alt="">
      </div>

      <div class="middle">
        <h2 class="title text-primary">{{book.title}}</h2>
        <p class="author">{{book.author}}</p>
        <p class="publisher">{{book.publisher}}</p>
      </div>

      <div class="right">
        <div class="star-wrapper text-primary">
          {{book.rating}}
          <rate :value="book.rating" />
        </div>
        <div class="view-count text-primary">浏览量：{{book.count}}</div>
        <p class="uploadUser">{{book.uploader}}</p>
      </div>
    </li>
  </ul>
</template>

<script>
import Rate from '@/components/rate.vue'

export default {
  name: 'Card',
  props: {
    books: {
      type: Array,
      default () {
        return []
      }
    }
  },
  computed: {

  },
  methods: {
    navigateTo (id) { // 跳转到图书详情页
      wx.navigateTo({url: `/pages/detail/main?id=${id}`})
    },
    previewImg (url) {
      wx.previewImage({
        urls: [url]
      })
    }
  },
  mounted () {
  },
  components: {
    Rate
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/stylus/mixin.styl';
  .wrapper
    font-size 14px
    .book
      overflow hidden
      height 150rpx
      padding 6px 0
      align-items flex-start
      &:first-child
        padding 0 0 10px
      &:last-child
        padding 10px 0 0
      .left
        overflow hidden
        position relative
        width 15%
        height 0
        margin-left 10px
        padding-bottom 22.7%
        .image
          position absolute
          top 0
          bottom 0
          left 0
          right 0
          width 90%
          height 90%
      .middle
        flex 0 0 55%
        width 55%
        .title
          width 100%
          white-space wrap
        .author
          padding-right 16px
          line-height 26px
          no-wrap()
      .right
        padding-right 8px
        text-align right
        .view-count
          line-height 26px
</style>

